<template>
  <div class="debug-container">
    <h1>用户状态调试</h1>
    
    <div class="info-card">
      <h3>登录状态</h3>
      <p :class="{ 'status-true': userStore.isLoggedIn, 'status-false': !userStore.isLoggedIn }">
        {{ userStore.isLoggedIn ? '已登录' : '未登录' }}
      </p>
    </div>

    <div class="info-card">
      <h3>管理员权限</h3>
      <p :class="{ 'status-true': userStore.isAdmin, 'status-false': !userStore.isAdmin }">
        {{ userStore.isAdmin ? '是管理员' : '不是管理员' }}
      </p>
    </div>

    <div class="info-card">
      <h3>用户信息</h3>
      <pre>{{ JSON.stringify(userStore.userInfo, null, 2) }}</pre>
    </div>

    <div class="info-card">
      <h3>LocalStorage 信息</h3>
      <div>
        <p><strong>Token:</strong> {{ token }}</p>
        <p><strong>User Info:</strong></p>
        <pre>{{ userInfoFromStorage }}</pre>
      </div>
    </div>

    <div class="info-card">
      <h3>权限检查详情</h3>
      <div v-if="userStore.userInfo">
        <p>- username === "admin": {{ userStore.userInfo.username === "admin" }}</p>
        <p>- username === "admin_gkl": {{ userStore.userInfo.username === "admin_gkl" }}</p>
        <p>- email === "1477042095@qq.com": {{ userStore.userInfo.email === "1477042095@qq.com" }}</p>
        <p>- nickname === "超级管理员": {{ userStore.userInfo.nickname === "超级管理员" }}</p>
        <p>- id === 1: {{ userStore.userInfo.id === 1 }}</p>
        <p>- id === "1": {{ userStore.userInfo.id === "1" }}</p>
        <p>- id === 3: {{ userStore.userInfo.id === 3 }}</p>
        <p>- id === "3": {{ userStore.userInfo.id === "3" }}</p>
      </div>
      <p v-else>用户未登录</p>
    </div>

    <div class="info-card">
      <h3>Quick Items</h3>
      <div v-for="item in quickItems" :key="item.key" class="quick-item">
        <p><strong>{{ item.label }}</strong> - {{ item.key }}</p>
        <p>需要登录: {{ item.requiresAuth }}</p>
        <p>需要管理员: {{ item.requiresAdmin }}</p>
        <p>显示: {{ shouldShowItem(item) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const token = ref('')
const userInfoFromStorage = ref('')

const quickItems = [
  {
    key: 'home',
    label: '首页',
    requiresAuth: false,
    requiresAdmin: false
  },
  {
    key: 'search',
    label: '搜索',
    requiresAuth: false,
    requiresAdmin: false
  },
  {
    key: 'bookshelf',
    label: '书架',
    requiresAuth: true,
    requiresAdmin: false
  },
  {
    key: 'admin',
    label: '管理中心',
    requiresAuth: true,
    requiresAdmin: true
  }
]

const shouldShowItem = (item) => {
  if (item.requiresAuth && !userStore.isLoggedIn) {
    return false
  }
  if (item.requiresAdmin && !userStore.isAdmin) {
    return false
  }
  return true
}

onMounted(() => {
  token.value = localStorage.getItem('novel_auth_token') || '无'
  const userInfo = localStorage.getItem('novel_user_info')
  userInfoFromStorage.value = userInfo ? JSON.stringify(JSON.parse(userInfo), null, 2) : '无'
})
</script>

<style scoped>
.debug-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.info-card {
  margin: 20px 0;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.info-card h3 {
  margin-top: 0;
  color: #333;
}

.status-true {
  color: green;
  font-weight: bold;
}

.status-false {
  color: red;
  font-weight: bold;
}

pre {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 14px;
}

.quick-item {
  margin: 10px 0;
  padding: 10px;
  background: white;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.quick-item p {
  margin: 5px 0;
}
</style> 